<!-- 头部横向导航栏 -->
<template>
  <div class="row items-center">
    <!--  首页机器下拉框 -->
    <q-select dense square standout filled options-dense v-show="optionShow" v-model="value" :options="option"
      :class="widthChange == 2 ? 'selectCss3' : widthChange ? 'selectCss' : 'selectCss2'" @filter="filterFn" use-input
      input-debounce="0" behavior="menu" @virtual-scroll="HeadonScroll">
      <template v-slot:no-option>
        <q-item>
          <q-item-section class="text-grey">暂无搜索内容...</q-item-section>
        </q-item>
      </template>
    </q-select>
    <!-- <q-select
      dense
      square
      standout
      filled
      options-dense
      v-show="cjoptionShow"
      v-model="cjvalue"
      :options="cjoptionArr"
      class="selectCss"
    />
    <q-select
      dense
      square
      standout
      filled
      options-dense
      v-show="gcoptionShow"
      v-model="gcvalue"
      :options="gcoptionArr"
      class="selectCss"
    />-->
    <!-- 工单下拉 -->
    <q-select dense square standout filled options-dense v-show="gdoptionShow" v-model="gdvalue" :options="options"
      class="selectCss" @filter="gdFilterFn" use-input input-debounce="0" behavior="menu" @blur="gdClick(gdvalue)"
      :loading="loading" @virtual-scroll="onScroll">
      <template v-slot:no-option>
        <q-item>
          <q-item-section class="text-grey">暂无搜索内容...</q-item-section>
        </q-item>
      </template>
    </q-select>
    <!-- 机器台账 -- 编辑/详情下拉 -->
    <q-select dense square standout filled options-dense v-show="jqOptionShow" v-model="jqName" :options="option"
      :class="widthChange == 2 ? 'selectCss3' : widthChange ? 'selectCss' : 'selectCss2'" @filter="filterFn" use-input
      input-debounce="0" behavior="menu" @virtual-scroll="HeadonScroll" @blur="JqClick(jqName)">
      <template v-slot:no-option>
        <q-item>
          <q-item-section class="text-grey">暂无搜索内容...</q-item-section>
        </q-item>
      </template>
    </q-select>
    <q-icon v-show="moreIconShow" class="q-ml-sm cursor-pointer" name="bi-grid-3x3-gap-fill"
      :color="moreColor ? 'primary' : 'grey'" size="24px" @click="moreRobot" />
  </div>
</template>
<script>
import { mapGetters } from 'vuex';
import { getTableListTwo } from 'src/api/property.js'
import { getReamtimeList, } from 'src/api/reamtime.js'
import { getordersTableList } from 'src/api/work.js'
import getNowFormatDate from "src/utils/get-now-format-date"

const nextPage = 2
export default {
  data() {
    return {
      value: '',
      jqName: '',
      headoption: [],
      queryList: {
        page: '',
        page_size: '',
        ordering: 'id'
      },
      id: 0,
      reamList: [],
      optionShow: 1,
      widthChange: 1,
      cjoptionShow: 0,
      gcoptionShow: 0,
      jqOptionShow: 0,
      cjvalue: '车间1',
      cjoptionArr: [
        {
          label: '车间1',
          value: '1'
        },
        {
          label: '车间2',
          value: '2'
        },
        {
          label: '车间3',
          value: '3'
        },
      ],
      gcvalue: '工厂1',
      gcoptionArr: [
        {
          label: '工厂1',
          value: '1'
        },
        {
          label: '工厂2',
          value: '2'
        },
        {
          label: '工厂3',
          value: '3'
        },
      ],
      gdvalue: '',
      gdoptionShow: 0,
      gdoptionArr: [],
      optionTwo: [],
      optionTwo2: [],
      stringOptions: [],
      stringOptions2: [],
      loading: false,
      nextPage,
      pageSize: 50,
      flag: 1,
      moreColor: false,
      moreName: '',
      moreCondition: null,
      moreIconShow: true,
    };
  },

  computed: {
    ...mapGetters(['levelList', 'statusId', 'gdTableList', 'gdOptionName', 'jqOptionName']),
    options() {
      return Object.freeze(this.gdoptionArr.slice(0, this.pageSize * (this.nextPage - 1)))
    },
    lastPage() {
      return Math.ceil(this.gdoptionArr.length / this.pageSize) + 1
    },
    option() {
      return Object.freeze(this.headoption.slice(0, this.pageSize * (this.nextPage - 1)))
    },
    headlastPage() {
      return Math.ceil(this.headoption.length / this.pageSize) + 1
    },
  },


  watch: {
    // 切换一级菜单下拉框改变
    levelList: {
      deep: true,
      immediate: true,
      handler(val) {
        if (val.length != 0 && val[0].meta.fixedMenu == '机器') {
          if (val[0].meta.title == '车间 Shopfloor') {
            this.cjoptionShow = 1
            this.gcoptionShow = 0
            this.optionShow = 0
          } else if (val[0].meta.title == '工厂  Plant') {
            this.optionShow = 0
            this.cjoptionShow = 0
            this.gcoptionShow = 1
          } else if (val[0].meta.title == '台账  Ledger') {
            this.optionShow = 0
            this.cjoptionShow = 0
            this.gcoptionShow = 0
          } else {
            this.cjoptionShow = 0
            this.gcoptionShow = 0
            this.optionShow = 1
          }
        } else {
          this.cjoptionShow = 0
          this.gcoptionShow = 0
          this.optionShow = 0
        }
      }
    },
    // 实时状态跳转
    statusId: {
      immediate: true,
      handler(val) {
        if (val.hasOwnProperty('id')) {
          this.value = val.name
          this.id = val.id
          if (val.name.length <= 6) {
            this.widthChange = 1
          } else if (val.name.length <= 10) {
            this.widthChange = 0
          } else {
            this.widthChange = 2
          }
          this.getList()
          this.$store.commit('customMenu/HEAD_SELECT_OPTION_VALUE', this.id);
        }
      }
    },
    $route: {
      immediate: true,
      handler(val) {
        if (val.meta.fixedMenu == "机器") {
          if (this.flag) {
            this.getOption();
          }
          if (val.path == '/realTimeState' || val.path == '/workpiece') {
            if (this.timer != null) {
              clearInterval(this.timer);
            }
            this.setTimer();
          } else {
            clearInterval(this.timer)
          }
        } else {
          clearInterval(this.timer)
        }
        if (val.path == '/xinjian') {
          this.gdoptionShow = 1
          this.getTable();
        } else {
          this.gdoptionShow = 0
        }
        if (val.path == '/relevance') {
          this.jqOptionShow = 1
        } else {
          this.jqOptionShow = 0
        }
        if (val.path == '/realTimeState' || val.path == '/workpiece' || val.path == '/stantTime') {
          this.moreIconShow = true
        } else {
          this.moreIconShow = false
          this.moreColor = false
          this.$emit('moreClick', this.moreIconShow)
        }
      }
    },
    gdOptionName: {
      immediate: true,
      handler(val) {
        if (val) {
          this.gdvalue = val
        }
      }
    },
    jqOptionName: {
      immediate: true,
      handler(val) {
        if (val) {
          this.jqName = val
          if (val.length <= 6) {
            this.widthChange = 1
          } else if (val.length <= 10) {
            this.widthChange = 0
          } else {
            this.widthChange = 2
          }
        }
      }
    },
    value: {
      immediate: true,
      handler(val) {
        if (val && val.hasOwnProperty('id')) {
          if (val.label.length <= 6) {
            this.widthChange = 1
          } else if (val.label.length <= 10) {
            this.widthChange = 0
          } else {
            this.widthChange = 2
          }
          this.id = val.value
          this.$store.commit('customMenu/HEAD_SELECT_OPTION_VALUE', this.id);
          this.getList();
        }
      }
    },
  },

  mounted() {
  },

  methods: {
    // 机器下拉查询
    filterFn(val, update) {
      if (val === '') {
        update(() => {
          this.headoption = this.optionTwo
          this.stringOptions = this.headoption
          if (this.moreColor && this.moreIconShow) {
            this.$emit('searchItem', this.headoption)
          }
        })
        return
      }

      update(() => {
        const needle = val.toLowerCase()
        this.headoption = this.stringOptions.filter(v => v.label.toLowerCase().indexOf(needle) > -1)
        if (this.moreColor && this.moreIconShow) {
          this.$emit('searchItem', this.headoption)
        }
      })
    },
    // 工单下拉查询
    gdFilterFn(val, update) {
      if (val === '') {
        update(() => {
          this.gdoptionArr = this.optionTwo2
          this.stringOptions2 = this.gdoptionArr
        })
        return
      }

      update(() => {
        const needle = val.toLowerCase()
        this.gdoptionArr = this.stringOptions2.filter(v => v.label.toLowerCase().indexOf(needle) > -1)
      })
    },
    // 获取机器列表
    getOption() {
      this.headoption = []
      this.optionTwo = []
      getTableListTwo(this.queryList).then(res => {
        if (res.status == 200) {
          this.flag = 0;
          for (let i = 0; i < res.data.length; i++) {
            let obj = {
              value: res.data[i].id,
              label: res.data[i].name,
              id: res.data[i].id,
              assets_sn: res.data[i].assets_sn,
              electronic_code: res.data[i].electronic_code,
              img: res.data[i].img,
              location: res.data[i].location,
              main_motor_power: res.data[i].main_motor_power,
              model: res.data[i].model,
              name: res.data[i].name,
              owner_name: res.data[i].owner_name,
              owner_id: res.data[i].owner_id,
              production_speed_max: res.data[i].production_speed_max,
              production_speed_min: res.data[i].production_speed_min,
              purchase_date: res.data[i].purchase_date,
              manufacture_date: res.data[i].manufacture_date,
              first_use_date: res.data[i].first_use_date,
              create_time: res.data[i].create_time,
              modify_time: res.data[i].modify_time,
              sn: res.data[i].sn,
              type_id: res.data[i].type_id,
              type_name: res.data[i].type_name,
              vendor: res.data[i].vendor,
            }
            this.headoption.push(obj)
            this.optionTwo.push(obj)
          }
          if (localStorage.getItem('euworkShop_wechatPathTo') != null) {
            let arr = localStorage.getItem('euworkShop_wechatPathTo').split('?')
            if (arr.length == 2) {
              let newArr = arr[1].split('=')
              this.$store.commit('customMenu/HEAD_SELECT_OPTION_VALUE', newArr[1]);
              res.data.filter(item => {
                if (newArr[1] == item.id) {
                  this.value = item.name
                  this.jqName = item.name
                }
              })
              this.id = newArr[1]
            } else {
              this.value = res.data[0].name
              this.id = res.data[0].id
              this.jqName = res.data[0].name
              this.$store.commit('customMenu/HEAD_SELECT_OPTION_VALUE', this.id);
            }
            localStorage.removeItem('euworkShop_wechatPathTo')
          } else {
            this.value = res.data[0].name
            this.id = res.data[0].id
            this.jqName = res.data[0].name
            this.$store.commit('customMenu/HEAD_SELECT_OPTION_VALUE', this.id);
          }
          if (this.jqName.length <= 6) {
            this.widthChange = 1
          } else if (this.jqName.length <= 10) {
            this.widthChange = 0
          } else {
            this.widthChange = 2
          }
          this.$store.commit('work/JQ_ITEM_FRIST', res.data[0]);
          this.getList();
        }
      })
    },
    getList() {
      let data = {
        equip_id: this.id,
      }
      getReamtimeList(data).then(res => {
        if (res.status == 200) {
          this.moreName = res.data[0].equip_id.name
          this.moreCondition = res.data[0].working_condition
          this.$store.commit('customMenu/HEAD_REAMTIME_LIST', res);
        }
      })
    },
    // 定时器函数
    setTimer() {
      this.timer = setInterval(() => {
        this.getList();
      }, 60000)
    },
    // 切换工单
    gdClick(item) {
      this.$store.commit('work/GD_CLICK_ITEM', item)
    },
    // 台账切换机器
    JqClick(item) {
      if (item.label.length <= 6) {
        this.widthChange = 1
      } else if (item.label.length <= 10) {
        this.widthChange = 0
      } else {
        this.widthChange = 2
      }
      this.$store.commit('work/JQ_CLICK_ITEM', item)
    },
    // 获取工单列表数据
    getTable() {
      this.gdoptionArr = [];
      this.optionTwo2 = [];
      getordersTableList('').then(res => {
        if (res.status == 200) {
          this.$store.commit('work/GD_ITEM_FRIST', res.data[0])
          for (let i = 0; i < res.data.length; i++) {
            let obj = {
              id: res.data[i].id,
              idNum: i + 1,
              sn: res.data[i].sn,
              label: res.data[i].sn,
              cpId: res.data[i].product_id,
              cpSn: res.data[i].product_id.sn,
              cpDw: res.data[i].product_id.specification,
              product_id: res.data[i].product_id.name,
              process_route_id: res.data[i].process_route_id,
              planned_counts: res.data[i].planned_counts,
              work_counts: res.data[i].work_counts,
              good_counts: res.data[i].good_counts,
              bad_counts: res.data[i].bad_counts,
              planned_start_time: getNowFormatDate(new Date(res.data[i].planned_start_time)),
              planned_stop_time: getNowFormatDate(new Date(res.data[i].planned_stop_time)),
              work_start_time: res.data[i].work_start_time == null ? res.data[i].work_start_time : getNowFormatDate(new Date(res.data[i].work_start_time)),
              work_stop_time: res.data[i].work_start_time == null ? res.data[i].work_start_time : getNowFormatDate(new Date(res.data[i].work_stop_time)),
              defect_rate: res.data[i].defect_rate,
              is_delay: res.data[i].is_delay,
              status_name: res.data[i].status_name,
              status: res.data[i].status,
              progress_list: res.data[i].progress_list,
              customer_id: res.data[i].customer_id,
              progress: res.data[i].progress,
              owner_name: res.data[i].owner_name,
              owner_uid: res.data[i].owner_uid,
            }
            this.gdoptionArr.push(obj)
            this.optionTwo2.push(obj)
          }
        }
      })
    },
    // 点击更多图表
    moreRobot() {
      this.moreColor = !this.moreColor;
      this.$emit('moreClick', this.moreColor)
    },
    onScroll({ to, ref }) {
      const lastIndex = this.options.length - 1
      if (this.loading !== true && this.nextPage < this.lastPage && to === lastIndex) {
        this.loading = true

        setTimeout(() => {
          this.nextPage++
          this.$nextTick(() => {
            ref.refresh()
            this.loading = false
          })
        }, 500)
      }
    },
    HeadonScroll({ to, ref }) {
      const lastIndex = this.option.length - 1
      if (this.loading !== true && this.nextPage < this.headlastPage && to === lastIndex) {
        this.loading = true

        setTimeout(() => {
          this.nextPage++
          this.$nextTick(() => {
            ref.refresh()
            this.loading = false
          })
        }, 500)
      }
    },
  },
  beforeUnmount() {
    clearInterval(this.timer);
  },

}

</script>
<style lang='scss' scoped>
::v-deep(.selectCss) {
  max-width: 180px;
  max-height: 40px;
  border-radius: 2px;
  border: 1px solid #eaeaea;

  .q-field__inner {
    max-height: 40px;

    .q-field__control {
      max-height: 40px;
    }
  }
}

::v-deep(.selectCss2) {
  max-width: 230px;
  max-height: 40px;
  border-radius: 2px;
  border: 1px solid #eaeaea;

  .q-field__inner {
    max-height: 40px;

    .q-field__control {
      max-height: 40px;
    }
  }
}

::v-deep(.selectCss3) {
  max-width: 300px;
  max-height: 40px;
  border-radius: 2px;
  border: 1px solid #eaeaea;

  .q-field__inner {
    max-height: 40px;

    .q-field__control {
      max-height: 40px;
    }
  }
}
</style>
